<template>
  <div class="layui-container">
    <calc-bmi
        class="Calc"
        @CalcBmi="Calc"
        :currentData="currentData"
        :is-show="isShow"
    />
    <BmiStatus
        :currentData="currentData"
    />
    <TableBmi
        :todos="todos"
        @remove="remove"
    />

  </div>
</template>

<script>

import CalcBmi from "@/components/BmiCompontent/CalcBmi";
import BmiStatus from "@/components/BmiCompontent/BmiStatus";
import TableBmi from "@/components/BmiCompontent/TableBmi";

import axios from 'axios'

export default {
  name: "Bmi",
  components:{
    CalcBmi,
    BmiStatus,
    TableBmi
  },
  data(){
    return {
      currentData:{},
      isShow:false,
      todos:[],

    }
  },
  created(){
    this.getTodos()
  },
  methods:{

    getTodos(){
      axios({
        url: 'https://veihwwnelcwq.leanapp.cn/bmi'
      }).then(res => {
        this.todos = res.data.data
      })
    },


    Calc(data){
      console.log(data)
      axios({
        url:'https://veihwwnelcwq.leanapp.cn/bmi',
        method:'POST',
        data: data,
      }).then(res => {
            this.currentData = res.data.data
            this.isShow = true
        this.getTodos()
          }
      )
    },

    remove(id){
      // console.log(id)
      if (confirm('你确定删除吗？')){
        axios({
          url:'https://veihwwnelcwq.leanapp.cn/bmi',
          method: 'DELETE',
          data: {
            id:id,
          },
        }).then(res => {
          console.log(res.data.data)
          this.getTodos()
        })
      }
    },
  }

}
</script>

<style scoped lang="less">
@import "~_layui@2.6.8@layui/dist/css/layui.css";


</style>